<template>
	<view class="">
		1
	</view>
</template>

<script>
	import friendCardList from '@/pagesCard/components/friend-card-list/friend-card-list'
	import nodata from '@/pagesCard/components/nodata/nodata'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			friendCardList,
			nodata
		},
		data() {
			return {
				queryList: [],
				searchVal: '',
				itemInfo: {},
				showMoreListPopup: false,
				openId: null,
				remark: '',
				pageNo: 1,
				total: null
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow() {
			// this.queryCardAddBuddyList()
		},
		onReachBottom() {
			if (this.pageNo * 10 > this.total) {
				return uni.showToast({
					title: '没有更多数据',
					icon: 'none'
				})
			}
			this.pageNo++
			this.queryMoreCardAddBuddyList()
		},
		watch: {
			searchVal() {
				this.queryCardAddBuddyList()
			}
		},
		methods: {
			handleFriendCardItem({
				item,
				index
			}) {
				this.itemInfo = item
				this.showMoreListPopup = true
			},
			async queryCardAddBuddyList() {
				if (!this.searchVal) {
					return
				}
				let payload = {
					name: this.searchVal,
					pageNo: this.pageNo,
					pageSize: 10,
					openId: this.userInfo.openId
				}
				let res = await this.$api.queryCardAddBuddy(payload)
				if (res.success) {
					this.queryList = res.result.records
					this.total = res.result.total
				} else {
					this.queryList = []
					this.total = 0
				}
			},
			async queryMoreCardAddBuddyList() {
				if (!this.searchVal) {
					return
				}
				let payload = {
					name: this.searchVal,
					pageNo: this.pageNo,
					pageSize: 10,
					openId: this.userInfo.openId
				}
				let res = await this.$api.queryCardAddBuddy(payload)
				if (res.success) {
					let arr = res.result.records
					this.queryList = [...this.queryList, ...arr]
					this.total = res.result.total
				} else {
					this.queryList = []
					this.total = 0
				}
			},
			showAddModel(item) {
				this.itemInfo = item
				this.showMoreListPopup = true
				console.log(item);
			},
			hiddenMoreListPopup() {
				this.showMoreListPopup = false
			},
			async add() {
				let data = uni.getStorageSync('openId')
				if (data.openid) {
					this.openId = data.openid
				}
				const {
					id: friendId,
					name,
					head,
					unionId
				} = this.userInfo
				const {
					openId,
					id: cardId
				} = this.itemInfo //好友数据
				console.log(this.itemInfo, '//好友数据 this.itemInfo');
				let payload = {
					//使用好友数据
					openId,
					cardId,
					//使用自身数据
					name,
					head,
					friendOpenId: this.openId,
					friendId,
					friendUnionId: unionId,
					remark: this.remark,
				}
				let res2 = await this.$api.addNewFriend(payload)
				if (res2.success) {
					uni.showToast({
						title: '已发送好友申请',
						icon: 'none'
					});
					this.showMoreListPopup = false
					uni.navigateBack()

				} else {
					uni.showToast({
						title: res2.message,
						icon: 'none'
					});
					this.showMoreListPopup = false
				}
			},
			goToDetail(item, index) {
				console.log('goToDetail', item, index);
				uni.navigateTo({
					url: "/pagesCard/personDetail/personDetail?item=" +
						encodeURIComponent(JSON.stringify(item)),
				});
				this.showMoreListPopup = false
			},
		}
	}
</script>

<style lang="scss">
	.addBuddyWp {

		height: 100vh;

		.searchBox {
			margin: 0 30upx;
			// background-color: #fff;
			display: flex;
			padding-top: 30upx;
			align-items: center;
			margin-bottom: 30rpx;

			.inputWp {
				padding-left: 20rpx;
				display: flex;
				align-items: center;
				height: 72rpx;
				line-height: 72rpx;
				background-color: #f7f8fa;
				flex: 1;
			}

			.more {
				width: 60upx;
				margin-left: 20upx;
				background-color: #F9F9FF;
				text-align: center;


			}
		}

		.listWp {
			padding: 0 30rpx 30rpx 30rpx;
			background-color: #f7f8fa;
		}

	}

	.modelTitle {
		margin-top: 30upx;
		text-align: center;
		font-size: 30upx;
		font-weight: 400;
		color: #000000;
	}

	.remarkWp {
		margin: 30upx;

	}

	.moreItem {
		display: flex;
		margin: 30upx;
		padding: 15upx 0;
		border-bottom: 1upx solid #eee;


		.left {
			padding-right: 30upx;

			.leftImg {
				width: 100upx;
				height: 100upx;
			}
		}

		.right {
			.name {
				width: 91upx;
				height: 29px;
				font-size: 30upx;
				font-weight: 500;
				color: #000000;
				line-height: 36upx;
			}

			.title {
				padding-left: 22upx;
				font-size: 18upx;
				font-weight: 400;
				color: #666666;
				line-height: 36upx;
			}

			.company {
				padding-top: 22upx;
				font-size: 24upx;
				font-weight: 400;
				color: #333333;
				line-height: 36upx;
			}
		}
	}

	.operateList {
		display: flex;
		justify-content: space-evenly;
		margin: 30upx;

		.btnWp {
			width: 300upx;
		}
	}
</style>